<template>
    <div class="system-common-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="产品名称" prop="productId">
                            <el-select v-model="state.ruleForm.productId" filterable placeholder="请选择" class="w100">
                                <el-option v-for='item in state.productDict' :key='item.value' :label='item.label'
                                           :value='item.value'/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="退订日期" prop="UnsubscribeDate">
                            <el-date-picker v-model.trim="state.ruleForm.unsubscribeDate" type="date"
                                            placeholder="选择日期"
                                            value-format="YYYY-MM-DD" style="width: 100%" :clearable="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="文件上传">
                            <el-upload v-model:file-list="fileList"
                                       action='https://localhost:5001/SysApi/Exocytosis/Unsubscribe/ImportUnsubscribeExcel'
                                       multiple :limit="1"
                                       :http-request="uploadFile" class="avatar-uploader">
                                <el-button size="default" type="warning" plain>
                                    <el-icon>
                                        <ele-UploadFilled/>
                                    </el-icon>
                                    导入文件
                                </el-button>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        文本文件大小少于300KB..【文本文件格式：从第一列开始依次为 手机号,退订时间,订购时间,退费金额(分)】
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitText }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="editEsImportUnsubscribeDialog">

import {reactive, ref} from 'vue';
import type {UploadProps, UploadUserFile} from 'element-plus'
import request from '/@/utils/request';
import {ElMessageBox, ElMessage} from 'element-plus';
import SysEsProductApi from '/@/api/exocytosis/product';
import {sysBaseDict} from "/@/api/models";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const ruleFormRef = ref();
const state = reactive({
    ruleForm: {productId: undefined, unsubscribeDate: undefined},
    rules: {
        productId: [{required: true, message: '请选择产品', trigger: 'blur'}],
    },
    productDict: [] as sysBaseDict[],
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitText: '',
    },
});
const fileList = ref<UploadUserFile[]>([]);

// 打开弹窗
const openDialog = () => {
    fileList.value = [];

    state.dialog.title = '文件上传';
    state.dialog.submitText = '关 闭';
    // ruleFormRef.value.resetFields
    // 清空表单，此项需加表单验证才能使用;
    productQuery();
    state.dialog.isShowDialog = true;
};

// 产品字典
const productQuery = async () => {
    await SysEsProductApi().queryAll().then((res) => {
        if (res.data.resCode === '0000')
            state.productDict = res.data.result ?? [];
    });
};

// 关闭弹窗
const closeDialog = () => {
    emit('refresh');
    state.dialog.isShowDialog = false;
};

// 提交
const onSubmit = () => {
    closeDialog();
};

/**
 * 上传
 * @param {*} req
 */
const uploadFile = (req: any) => {
    const config = {
        headers: {'Content-Type': 'multipart/form-data'}
    };
    const formData = new FormData();
    formData.append('productId', state.ruleForm?.productId ?? '');
    if (state.ruleForm.unsubscribeDate)
        formData.append('unsubscribeDate', state.ruleForm.unsubscribeDate);
    formData.append('file', req.file);
    request.post('/SysApi/Exocytosis/Unsubscribe/ImportUnsubscribeExcel', formData, config).then((res) => {
        if (res.data.resCode != '0000') {
            ElMessage.error(res.data.resMessage);
        } else
            ElMessageBox.alert(res.data.resMessage, '提示', {
                confirmButtonText: '确认',
                type: 'info',
            });
    });
};

// 导出对象
defineExpose({
    openDialog,
});

</script>
<style lang="scss" scoped>
.avatar-uploader .avatar {
    width: 360px;
    height: 180px;
    display: block;
}

.avatar-uploader :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 360px;
    height: 180px;
    text-align: center;
}
</style>
